<template>
  <view class="u-p-l-30 u-p-r-30 u-p-t-30" :style="my_style">
    <common-list @load="getMyActivityList" :list="goodsList" :status="status">
      <template #list>
        <view
          class="radius-16 hidden bg-white flex als u-p-r-30 u-m-b-20"
          v-for="(item, i) in goodsList"
          :key="i"
          @click="jump(`/views/activity/activity_detail?id=${item.activity_id}`)"
        >
          <image class="w-220 h-220" mode="widthFix" :src="item.cover_img"></image>
          <view class="u-m-l-20 u-flex-1 u-p-t-12">
            <view class="font-32 black-color font-weight-500"
              >{{ item.title }} <text class="badge u-m-l-16">线下体验</text>
            </view>
            <view class="gray-color font-24 u-m-t-16">
              {{ item.start_time | date('mm月dd日') }}-{{ item.end_time | date('mm月dd日') }}
            </view>
            <view class="gray-color font-24 u-m-t-16 flex-between">
              <text>{{ item.member_num }}人已报名</text>
              <text>距活动开始还有</text>
            </view>
            <view class="gray-color font-24 u-m-t-16 flex-between">
              <text>已使用{{ item.price }}街区币报名</text>
              <text><text class="red-color font-40 font-weight-500 u-m-r-5">3</text> 天</text>
            </view>
          </view>
        </view>
      </template>
      <template #empty>
        <empty text="暂无参加活动"></empty>
      </template>
    </common-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsList: [],
        page: 1,
        limit: 20,
        status: 'loading',
      }
    },
    onLoad() {
      this.getMyActivityList()
    },
    onReachBottom() {
      if (this.status === 'nomore') return
      this.getMyActivityList()
    },
    methods: {
      async getMyActivityList() {
        const { page, limit } = this
        let params = {
          page,
          limit,
        }
        this.status = 'loading'
        const res = await this.$api.common.activity('getMyActivityList', params)
        if (res.code === 200) {
          const { count, list } = res.data
          this.goodsList = [...this.goodsList, ...list]
          if (this.goodsList.length >= count) {
            // 所有数据加载完毕
            this.status = 'nomore'
            return
          }
          // 单次请求数据完毕
          this.status = 'loadmore'
          this.page = this.page + 1
        }
      },
    },
  }
</script>

<style></style>
